<template>
  <div class="input">
      <input type="text" @keyup.enter="addTodo" placeholder="你接下来要做什么?">
  </div>
</template>

<script setup>
const emit = defineEmits(['addTodo'])

// 添加todo
const addTodo = (event) => {
  // event.target：获取事件发生的目标元素
  let name = event.target.value.trim()
  if (!name) {
      alert('内容不能为空')
      return
  }
  let todo = { id: Date.now(), name, isDone: false }
  // todos.value.unshift(todo) 
  // 子通信父
  emit('addTodo', todo)
  // 清空输入框
  event.target.value = ''
}
</script>

<style lang="scss" scoped>
.input input {
  width: 100%;
  height: 40px;
  border: 1px solid #999;
  outline: none;

}
</style>